<template>
  <view class="order">
    <view class="head">
      <image
        src="https://lishiots.oss-cn-hangzhou.aliyuncs.com/webstatic/outing-fun/route/orderBg.png"
        class="img"
      />
    </view>
    <view class="main">
      <view class="top">
        <image
          :src="outingDetail.logoImage"
          class="img"
        />
        <view class="info">
          <h1 class="font-14">
            {{ outingDetail.name || '' }}
          </h1>
          <view class="text desc">
            {{ outingDetail.description || '' }}
          </view>
          <span class="price">{{ orderDetail.saleSettlementPrice || '' }}</span>
        </view>
      </view>
      <view class="center">
        <view class="line" v-if="!orderDetail.deliverShip">
          <span>出发日期：</span>
          <span class="font-weight-500">{{ orderDetail.date || '' }}</span>
        </view>
        <view class="line">
          <span>数量：</span>
					<uni-number-box
            :min="orderDetail.min || 1"
            :max="orderDetail.stock"
            v-model="orderDetail.member"
            @change="changeNumber"
          />
          <!-- <span class="font-weight-500">{{ orderDetail.member || '' }}</span> -->
        </view>
        <view class="line">
          <span>单价：</span>
          <span class="font-weight-500">{{ orderDetail.saleSettlementPrice || '' }}</span>
        </view>
        <view class="line">
          <span>合计：</span>
          <span class="font-weight-500">¥{{ totalAmount }}</span>
        </view>
        <view class="line">
          <span>优惠：</span>
          <span class="font-weight-500">-¥{{ costAmount }}</span>
        </view>
        <view
          class="line"
          style="border-bottom:0;padding-bottom:8px"
        >
          <span class="font-16 font-weight-500">实付：</span>
          <span
            class="font-16 font-weight-500"
          >¥{{ realAmount }}</span>
        </view>
        <image
          src="https://lishiots.oss-cn-hangzhou.aliyuncs.com/webstatic/outing-fun/route/dashed.png"
          class="dashed"
        />
        <view class="line flex">
          <span>支付方式：</span>
          <radio-group
            class="radioGroup"
            @change="payTypeChange"
          >
            <view class="radioContain">
              <label class="radio">
                <radio
                  value="Person"
                  :checked="payType === 'Person'"
                  color="#FE7D15"
                  class="radioBtn"
                />个人付款
              </label>
            </view>
            <view class="radioContain">
              <label class="radio">
                <radio
                  value="Company"
                  :checked="payType === 'Company'"
                  color="#FE7D15"
                  class="radioBtn"
                />公司付款
              </label>
            </view>
          </radio-group>
        </view>
        <view class="contain">
          <view class="coupon">
            <view class="text font-weight-500">
              <checkbox-group>
                <label>
                  <checkbox
                    class="check"
                    value="cb"
                    color="#FE7D15"
                    @change="changeUseCoupon"
                  />
                </label>
              </checkbox-group>
              使用快乐券抵扣
              <view class="number_box">
                <uni-number-box
                  :min="0"
                  :max="maxCouponNum || couponNumber"
                  :value="number"
                  :disabled="!useCoupon"
                  @change="changeNumber1"
                />
              </view>
              张
            </view>
          </view>
          <p
            class="font-11 color-999"
            style="text-align: right;"
          >
            快乐券面值{{ faceValue }}元，剩余
						<span class="oriange">{{ useCouponNumber }}</span>
						张可抵用
						<span class="oriange">{{ useCouponAmount }}</span>元
          </p>
        </view>
      </view>

      <view class="contact">
        <view class="line">
          <span class="font-weight-500 color-333">联&nbsp;&nbsp;系&nbsp;&nbsp;人：</span>
          <input
            v-model="name"
            type="text"
            class="input"
            placeholder="请填写联系人"
          >
        </view>
        <view class="line">
          <span class="font-weight-500 color-333">联系电话：</span>
          <input
            v-model="phone"
            type="tel"
            class="input"
            placeholder="请填写联系人手机号"
          >
        </view>
				<view class="line" v-if="orderDetail.deliverShip">
				  <span class="font-weight-500 color-333">收货地址：</span>
				  <input
						v-model="address"
            maxlength="50"
				    style="width: 440rpx;"
				    type="text"
				    class="input"
				    placeholder="请输入详细地址用以接收快递"
				  >
				</view>
      </view>
      <!-- <view class="tip">
        发票：订单完成后在「我的已完成订单」中申请开票
      </view> -->
    </view>
    <view class="foot">
      <span class="txt">{{ realAmount }}</span>
      <button
        class="btn"
        :loading="btnLoading"
        :disabled="btnLoading"
        @click="submitOrder"
      >
        去支付
      </button>
    </view>
  </view>
</template>

<script>
	import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue';
	import {
		onLinePay
	} from '@/common/js/ddPay.js';
	export default {
		components: {
			uniNumberBox
		},
		data() {
			return {
				number: 0,
				payType: 'Person',
				useCoupon: false,
				name: '',
				phone: '',
				address:'',
				btnLoading: false,
				couponNumber: 0,
				realAmount: 0,
				totalAmount: 0,
				costAmount: 0,
				faceValue: this.$store.state.faceValue || 50,
				outingDetail: this.$store.state.outingOrderInfo.outingDetail || {},
				orderDetail: this.$store.state.outingOrderInfo.orderDetail || {},
				useCouponNumber: 0,
				useCouponAmount: 0,
				maxCouponNum: 0,
				firstCalLine: true
			};
		},
		onShow() {
			console.log('this.$store.state.outingOrderInfo', this.$store.state.outingOrderInfo);
			this.getUserInfo();
			this.orderCalLine();
		},
		methods: {
			changeNumber(val) {
				this.orderDetail.member = val;
        this.number = 0
				this.orderCalLine(val);
			},
			changeNumber1(val) {
        this.number = val;
        if(this.useCoupon){
          this.orderCalLine(val);
        }
				// console.log(12)
				// if (this.useCoupon) {
				// 	this.number = val;
				// 	this.orderCalLine(val);
				// } else {
				// 	this.number = 0;
				// }
			},
			changeUseCoupon(e) {
				this.useCoupon = e.detail.value;
				this.orderCalLine();
			},
			payTypeChange(e) {
				this.payType = e.detail.value;
			},
			showError(desc, time = 1) {
				uni.showToast({
					title: desc,
					duration: time
				});
			},
			getUserInfo() {
				this.$ajax({
					method: 'get',
					url: '/outing/mobile/user/userInfo/queryInfo',
				}).then(res => {
					this.couponNumber = res.data.couponNumber || 0;
				});
			},
			submitOrder() {
				if (!this.name) return this.showError('请输入姓名');
				if (!this.phone) return this.showError('请输入电话');
				if(this.orderDetail.deliverShip){
					if (!this.address) return this.showError('请输入收获地址');
				}
				this.btnLoading = true;
				const {
					date,
					member,
					productDetailId
				} = this.orderDetail;
				if (this.outingDetail.id && date && member) {
					this.$ajax({
						method: 'post',
						url: '/outing/mobile/order/groupOrder',
						header: 'application/json',
						data: {
							couponFlag: this.useCoupon ? 'Y' : 'N',
							couponNumber: this.number,
							name: this.name,
							tel: this.phone,
							payMethod: this.payType,
							productId: this.outingDetail.id,
							productDetailId,
							touristDate: date,
							buyNumber: member,
							toAddress:this.address || '',
              deliverShip:this.orderDetail.deliverShip || false
						}
					}).then(res => {
						if(res.data) {
							// 请求支付
							onLinePay(res.data).finally(e => {
								this.btnLoading = false;
							});
						} else {
							this.btnLoading = false;
						}
					}).catch(e => {
						this.btnLoading = false;
					});;
				}
			},
			// 订单计算
			orderCalLine(number) {
				const {
					date,
					member,
					productDetailId
				} = this.orderDetail;
				if(this.outingDetail.id && date && member) {
					uni.showLoading({
						title: '计算中'
					});
					this.$ajax({
						method: 'post',
						url: '/outing/mobile/order/calBuild',
						header: 'application/json',
						data: {
							couponFlag: this.useCoupon ? 'Y' : 'N',
							couponNumber: number || this.number,
							productId: this.outingDetail.id,
							productDetailId,
							touristDate: date,
							touristNumber: member
						}
					}).then(res => {
						const { realAmount, costAmount, totalAmount, useCouponNumber, useCouponAmount } = res.data;
						this.realAmount = realAmount;
						this.costAmount = costAmount;
						this.totalAmount = totalAmount;
						this.useCouponNumber = useCouponNumber;
						this.useCouponAmount = useCouponAmount;
						if(this.firstCalLine && realAmount === 0) {
							this.firstCalLine = false
							this.maxCouponNum = number
						}
            if(Math.ceil(this.orderDetail.saleSettlementPrice*this.orderDetail.member/50) >= this.couponNumber){
              this.maxCouponNum=this.couponNumber
            }else{
              this.maxCouponNum = Math.ceil(this.orderDetail.saleSettlementPrice*this.orderDetail.member/50)
            }
					}).finally(() => {
						uni.hideLoading();
					});
				}
			}
		}
	};
</script>

<style lang="less" scoped>
	.order {
		min-height: 100vh;
		background: #f7f9fb;
		padding-bottom: 190upx;

		.head {
			width: 750upx;
			height: 638upx;
			margin-bottom: -400upx;
			position: relative;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		.main {
			margin: 0px auto;
			width: 710upx;
			position: relative;

			.top {
				padding: 30upx;
				display: flex;
				justify-content: space-between;
				border-radius: 10upx;
				background: #fff;

				.info {
					line-height: 38upx;
					width: 460upx;

					.text {
						font-size: 24upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						margin: 10upx;
					}
					.desc {
						overflow: hidden;
						text-overflow: ellipsis;
						word-break: break-all;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.price {
						position: absolute;
						left: 220upx;
						top: 150upx;
						font-size: 34upx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;

						&::before {
							content: '￥';
							font-size: 24upx;
						}
					}
				}

				.img {
					width: 160upx;
					height: 160upx;
					border-radius: 10upx;
					overflow: hidden;
				}
			}

			.center {
				background: #fff;
				padding: 10upx 0 30upx 0;
				margin-top: 20upx;
				background: #fff;
				border-radius: 10upx;
				position: relative;

				.dashed {
					width: 710upx;
					height: 40upx;
				}

				.line {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 26upx 0;
					width: 650upx;
					margin: 0px auto;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					border-bottom: 1px #e8e8e8 solid;

					.radioBtn {
						transform: scale(0.7);
					}
					
					.radioGroup {
						display: flex;
					}

					.radioContain {
						margin-left: 50upx;
					}
				}

				.flex {
					justify-content: flex-start;
					padding: 8upx 50upx 26upx 0;
				}

				.contain {
					padding-right: 50upx;

					.coupon {
						display: flex;
						justify-content: flex-end;

						.check {
							transform: scale(0.7);
						}

						.number_box {
							margin: 0 10upx 0 37upx;
						}

						.text {
							display: flex;
							align-items: center;
							margin: 22upx 0;
						}
					}
				}
			}

			.tip,
			.contact {
				margin-top: 20upx;
				padding: 10upx 30upx;
				background: #fff;
				border-radius: 10upx;

				.line {
					display: flex;
					align-items: center;
					padding: 26upx 0;
					border-bottom: 1px #e8e8e8 solid;

					&:last-child {
						border-bottom: 0;
					}

					.input {
						border: none;
						margin-left: 30upx;
						font-size: 28upx;
					}

					.uni-input-placeholder {
						color: #999;
					}
				}
			}

			.tip {
				padding: 40upx 30upx;
			}
		}

		.foot {
			height: 170upx;
			position: fixed;
			left: 0;
			bottom: 0;
			right: 0;
			padding: 20upx 30upx 0;
			box-sizing: border-box;
			background: #ffffff;
			box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
			display: flex;
			justify-content: space-between;

			.txt {
				font-size: 38upx;
				color: #2a2e25;
				margin-top: 20upx;

				&::before {
					font-size: 26upx;
					content: '需支付：￥';
				}
			}

			.btn {
				width: 300upx;
				height: 82upx;
				background: linear-gradient(135deg, #f78833 0%, #ffc77b 100%);
				border-radius: 40upx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #ffffff;
				text-align: center;
				line-height: 82upx;
			}
		}
	}
</style>
